<template>
  <div class="gl_heightFull">
    <div class="gl_searchBox gl_mb_15">
      <el-row :gutter="20">
        <el-col :md="6" :lg="4">
          <p>订单状态</p>
          <el-select v-model="orderForm.OrderStatusCode" size="mini" placeholder="请选择订单状态" filterable @change="getData()">
            <el-option label="全部" value="" />
            <el-option v-for="item in orderStatus" :key="item.code" :label="item.value" :value="item.code" />
          </el-select>
        </el-col>
        <el-col :md="6" :lg="4">
          <p>支付方式</p>
          <el-select v-model="orderForm.ChannelTypeCode" size="mini" placeholder="请选择支付方式" filterable @change="getData()">
            <el-option label="全部" value="" />
            <el-option v-for="item in dict.channelType" :key="item.code" :label="item.value" :value="item.code" />
          </el-select>
        </el-col>
        <el-col :md="7" :lg="5">
          <p>付款时间</p>
          <el-date-picker
            v-model="paymentTime"
            type="daterange"
            range-separator="至"
            start-placeholder="请选择日期"
            end-placeholder="请选择日期"
            size="mini"
            value-format="yyyy-MM-dd"
            style="width:100%"
            @change="timeChange"
          />
        </el-col>
        <el-col :md="6" :lg="4">
          <p>订单号/姓名</p>
          <el-input v-model="orderForm.OrderNameOrOrderNo" placeholder="请输入订单号/姓名" size="mini" clearable @change="getData()" />
        </el-col>
        <el-col :md="9" :lg="7">
          <el-button style="margin-top:27px" type="primary" size="mini" @click="getData()">查询</el-button>
          <el-button style="margin-top:27px" type="warning" size="mini" @click="reset()">重置</el-button>
          <el-button :loading="buLoading" style="margin-top:27px" type="success" size="mini" @click="exportData()">导出Excel表</el-button>
        </el-col>
      </el-row>
    </div>
    <el-row v-if="false" class="gl_fs_14 gl_mb_5" style="color: #595959">
      <el-col align="right">共计 11 条数据</el-col>
    </el-row>
    <el-table v-loading="loading" class="gl_table_noBorder" :data="orderTable" size="mini">
      <el-table-column type="index" label="序号" :width="50" align="center" />
      <el-table-column prop="orderNo" label="订单号" :width="190" align="center" />
      <el-table-column prop="creatorMobile" label="下单账号" width="100" align="center">
        <template slot-scope="{row}">
          <p>
            <span>{{ row.orderAccount || (row.creatorMobile ? row.creatorMobile : '- -') }}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="creatorName" label="付款人" />
      <el-table-column prop="creationTime" label="创建时间" :width="140" align="center">
        <template slot-scope="{row}">
          <span v-if="!row.creationTime || row.creationTime == '0001-01-01T00:00:00'">- -</span>
          <span v-else>{{ row.creationTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="payDateTime" label="付款时间" :width="140" align="center">
        <template slot-scope="{row}">
          <span v-if="!row.payDateTime || row.payDateTime == '0001-01-01T00:00:00'">- -</span>
          <span v-else>{{ row.payDateTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="orderStatusCode" label="订单状态" align="center">
        <template slot-scope="{row}">
          <p v-if="row.orderStatusCode">
            <span v-for="(ktem, index) in dict.orderStatus" :key="index">
              {{ ktem.code === row.orderStatusCode ? ktem.value: '' }}
            </span>
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="isOnlinePayment" label="支付渠道" align="center">
        <template slot-scope="{row}">
          <span v-if="row.isOnlinePayment">线上支付</span>
          <span v-else>线下支付</span>
        </template>
      </el-table-column>
      <el-table-column prop="channelTypeCode" label="支付方式" align="center">
        <template slot-scope="{row}">
          <p v-if="row.channelTypeCode">
            <span v-for="(ktem, index) in dict.channelType" :key="index">
              {{ ktem.code === row.channelTypeCode ? ktem.value: '' }}
            </span>
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="payAmount" label="费用">
        <template slot-scope="{row}">
          <p>{{ (row.payAmount / 100).toFixed(2) }}元</p>
        </template>
      </el-table-column>
      <el-table-column prop="customerRemark" label="备注">
        <template slot-scope="{row}">
          <p>{{ row.customerRemark || '- -' }}</p>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" :width="90" align="center">
        <template slot-scope="{row}">
          <el-button size="mini" type="text" @click="detail(row.orderNo)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row style="text-align: right;" class="gl_pt_15 gl_mr_15">
      <el-pagination
        :current-page="orderForm.Page"
        :page-size="orderForm.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { api_GET_DownLoadFileAddHeader } from '@/extend/api/file';
import { errorText } from '@/lib';
import {
  api_GET_TradeTrainingOrderList
} from '@/extend/api/swaggerApi/app.js';
import {
  Api_GET_TradeTrainingOrderListQO
} from '@/lib/form/swaggerForm';
export default {
  name: 'GameAmount',
  data() {
    return {
      loading: false,
      buLoading: false,
      trainId: '',
      totalPage: 0, // 总条目数
      paymentTime: [], // 付款时间
      orderForm: new Api_GET_TradeTrainingOrderListQO(),
      orderStatus: [],
      orderTable: []
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.trainId = this.$route.params.id;
    this.getDict().then(res => {
      this.orderStatus = res.orderStatus.filter((item) => {
        return item.code !== 'TRADE_SUCCESS' && item.code !== 'TRADE_CLOSED';
      });
    });
    this.getData();
  },
  methods: {
    // 获取字典
    ...mapActions({ getDict: 'dict/getDict' }),
    // 获取表格数据
    getData(page) {
      var that = this;
      that.loading = true;
      that.orderForm.Page = page || 1;
      that.orderForm.SkipCount = (that.orderForm.Page - 1) * that.orderForm.MaxResultCount;
      that.orderForm.TrainningId = that.trainId;
      api_GET_TradeTrainingOrderList(that.orderForm).then(res => {
        that.orderTable = res.items;
        that.totalPage = res.totalCount;
        that.loading = false;
      }).catch(error => {
        that.loading = false;
        that.$message({ type: 'error', message: error.error && error.error.message || '获取订单数据失败' });
      });
    },
    // 付款日期选择器
    timeChange(val) {
      if (val instanceof Array) {
        this.orderForm.PaymentStartDate = this.paymentTime[0];
        this.orderForm.PaymentEndDate = this.paymentTime[1];
      } else {
        this.orderForm.PaymentStartDate = '';
        this.orderForm.PaymentEndDate = '';
      }
      this.getData(this.orderForm.Page);
    },
    // 重置搜索表单
    reset() {
      this.orderForm = new Api_GET_TradeCompetitonOrderListQO();
      this.getData();
    },
    // 导出表格
    exportData() {
      var that = this;
      this.buLoading = true;
      const tempUrl = `/api/excel`;
      const fileName = '培训金额付款明细' + '.xlsx';
      const params = {};
      params.ReportName = 'ExportTrainningOrderExcel';
      params.searchTrainningOrderInput = JSON.stringify(this.orderForm);
      api_GET_DownLoadFileAddHeader(tempUrl, fileName, params, WEB_CONFIG.VUE_APP_SWAGGER_TRAIN_BASE).then(res => {
        that.buLoading = false;
      }).catch(error => {
        that.buLoading = false;
        errorText(error).then(function(text) {
          that.$message({ type: 'error', message: text });
        });
      });
    },
    // 查看详情
    detail(orderNo) {
      // const { query } = this.$route;
      this.$router.push({
        name: 'TrainAmountDetail',
        query: { orderNo: orderNo }
      });
    },
    // 分页
    sizeChange: function(MaxResultCount) {
      this.orderForm.MaxResultCount = MaxResultCount; // 每页显示条目数
      this.getData();
    },
    pageIndexChange(currentPage) {
      this.getData(currentPage);
    }
  }
};
</script>

<style lang="scss" scoped>

</style>
